<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="650px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules">
                <el-form-item label="所属城市" prop="area_id">
                    <el-select-v2
                        v-model="formData.area_id"
                        filterable
                        clearable
                        :options="optionCity"
                        placeholder="请选择"
                        class="flex-1"
                        :height="280"
                        @change="onChange_city"
                    />
                </el-form-item>
                <el-form-item label="标签名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入标签名称" clearable />
                </el-form-item>
                <el-form-item label="所属产品分类" prop="product_cate_ids">
                    <el-select
                        :disabled="formData.area_id == ''"
                        class="flex-1"
                        v-model="formData.product_cate_ids"
                        multiple
                        placeholder="请先选择所属城市"
                        clearable
                    >
                        <el-option  v-for="(item) in product_cate_list " :label="item.name" :value="item.id.toString()" :key="item.id.toString()"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="">
                    <el-input
                        v-model="formData.remark"
                        type="textarea"
                        rows="5"
                        placeholder="请填写备注信息"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="启用状态" prop="is_enable" required>
                    <el-radio-group v-model="formData.is_enable">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import { tagAdd, tagEdit, tagDetail } from '@/api/channel/tag';
import { productCate } from '@/api/product/product';
import {useDictOptions} from "@/hooks/useDictOptions";
import Popup from '@/components/popup/index.vue'
const popupRef = shallowRef<InstanceType<typeof Popup>>()
import type { FormInstance } from 'element-plus'
import useAppStore from '@/stores/modules/app'
const useApp = useAppStore()
const optionCity:any = useApp.optionCity;

const formRef = shallowRef<FormInstance>()

const {optionsData} = useDictOptions<{
  product_cate_list: any[],
}>({
  product_cate_list: {
    api: productCate
  }
})

const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑标签' : '新增标签'
})

const emit = defineEmits(['success', 'close'])

const options = [
    {
        value: 'Option1',
        label: 'Option1'
    },
    {
        value: 'Option2',
        label: 'Option2'
    },
    {
        value: 'Option3',
        label: 'Option3'
    },
    {
        value: 'Option4',
        label: 'Option4'
    },
    {
        value: 'Option5',
        label: 'Option5'
    }
]

const formData = reactive({
    area_id: '',
    id: '',
    //名称
    name: '',
    //所属产品分类
    product_cate_ids: '',
    //备注
    remark: '',
    //启用状态
    is_enable: 1
})

const formRules = {
    area_id: [
        {
            required: true,
            message: '请选择所属城市',
            trigger: 'blur'
        }
    ],
    name: [
        {
            required: true,
            message: '请输入标签名称',
            trigger: 'blur'
        }
    ],
    product_cate_ids: [
        {
            required: true,
            message: '请选择所属产品分类',
            trigger: 'blur'
        }
    ],
    is_enable: [
        {
            required: true,
            message: '请选择启用状态',
            trigger: 'blur'
        }
    ]
}

const handleSubmit = async () => {
    await formRef.value?.validate()
    const newFormData = JSON.parse(JSON.stringify(formData))
    mode.value == 'edit' ? await tagEdit(newFormData) : await tagAdd(newFormData)
    popupRef.value?.close()
    emit('success')
}

const handleClose = () => {
    emit('close')
}
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

const setFormData = (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    const data = await tagDetail({ id: row.id, area_id: row.area_id })
    getCateList(row.area_id)
    console.log(data)
    setFormData(data)
    // setFormData(row)
}
const product_cate_list:any = ref([])
const getCateList = async (area_id:any) => {
    const res = await productCate({area_id: area_id})
    console.log(res)
    product_cate_list.value = res
}

const onChange_city = (val:any) => {
    if (val) {
        getCateList(val)
    }
}

defineExpose({
    open,
    setFormData,
    getDetail
})
</script>
<style lang="scss" scoped>
.edit-popup {
    ::v-deep .el-select {
        width: 100%;
    }
}
</style>
